<template>
  <div>
    <div class="row mb-1">
      <div class="col">
        <el-button @click="refresh" type="primary">刷新</el-button>
        <el-button @click="dialogVisible = true" type="primary">添加团队课程包</el-button>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <el-table :data="mypackegekeyvalue" border height="68vh" style="width: 100%">
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column prop="pID" label="代理商课包ID"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column label="操作" class-name="text-right">
            <template #default="scope">
              <el-button size="default" type="danger" @click="del(scope.row.ID)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="添加" width="60%">
      <template #header>
        <span class="icon-text el-dialog__header-title">
          <el-icon class="text-primary">
            <Guide />
          </el-icon>
          配置代理商课包
        </span>
      </template>
      <el-select v-model="value" placeholder="Select">
        <el-option v-for="item in unusepackegekey" :key="item.ID" :label="item.packegeName"
          :value="item.ID"></el-option>
      </el-select>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="sbumit">添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { PropType, computed, defineComponent, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { asyncchangeteamcoursegroup, asyncselectteamcoursegroup } from "../../../api";
import { Storekey } from "../../../interface";
import Alymodel from "../../../mysql_interface/model";
import Studycodemodel from "../../../mysql_interface/studycodemodel";

export default defineComponent({
  props: {
    ID: Number,
    start: Function,
    team: Object as PropType<Studycodemodel.Iteam>,
  },
  setup(p) {
    const store = useStore(Storekey);
    const value = ref();
    const dialogVisible = ref(false);
    const packegekey = computed<Alymodel.IMpackegekey[]>(() => {
      return store.getters.getpackegekey;
    });
    const unusepackegekey = computed(() => {
      return packegekey.value?.filter(
        (e) => !mypackegekey.value.find((t) => t.coursegroupid === e.ID)
      );
    });
    const mypackegekey = ref<Studycodemodel.Iteamcoursegroup[]>([]);
    const mypackegekeyvalue = computed(() => {
      return mypackegekey.value.map((e) => {
        const t = packegekey.value.find((o) => o.ID === e.coursegroupid);
        return {
          pID: e.coursegroupid,
          ID: e.ID,
          name: t?.packegeName,
        };
      });
    });
    onMounted(() => {
      refresh()
    });
    async function refresh() {
      store.dispatch("actionpackegekey", {
        _order: 'packegeName', _sortable: 'ASC',
      });
      start();
    }
    async function start() {
      const data = await asyncselectteamcoursegroup({
        teamid: p.ID,
      });
      mypackegekey.value = data.rows;
    }
    async function sbumit() {
      const id = value.value;
      if (id) {
        await asyncchangeteamcoursegroup({
          teamid: p.ID,
          coursegroupid: id,
        });
        ElMessage.success("添加成功");
        dialogVisible.value = false
        start();
      }
    }
    async function del(ID: number) {
      ElMessageBox.confirm("确定要删除该课包？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        if (ID) {
          await asyncchangeteamcoursegroup({
            ID,
          });
          ElMessage.success("删除成功");
          start();
        }
      }).catch(() => { });
    }

    return {
      refresh,
      sbumit,
      unusepackegekey,
      mypackegekeyvalue,
      dialogVisible,
      value,
      del,
      packegekey,
    };
  },
});
</script>


<style scoped></style>